<template>
  <div class="nic">
    <van-nav-bar
      title="我的资料"
      left-arrow
      @click-left="$router.go(-1)"
      :right-text="main === true ? '保存' : ''"
      @click-right="savee"
    >
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <van-field
      v-model="$store.state.userInfo.nickname"
      required
      class="field"
      @input="input"
    />
  </div>
</template>
<script>
// 特别的注意,用vuex $store.state.userInfo.nickname可以直接改数据,先把api封装的方法初始化(不做也行),在给保存的点击事件,最后提示成功,后退上一页
// 期间的参数,要特别的注意,不要多传,否则会解6个小时...................!!!!!!!!!!!!!!!
import { edit } from '@/api/api.js'
// import { mapState } from 'vuex',
export default {
  data () {
    return {
      main: false
      // nic: this.$store.state.userInfo.nickname
    }
  },

  methods: {
    input () {
      this.main = true
    },
    // api修改数据
    async save () {
      await edit({ nickname: this.$store.state.userInfo.nickname })
      // this.$toast.success('用户信息更新成功')
    },
    // 保存按钮点击
    savee () {
      this.save()
      this.$toast.success('用户信息更新成功')
      this.$router.go(-1)
    }
  },
  created () {
    // 初始化昵称
    this.save()
  }
}
</script>
<style lang="less" scoped>
.nic {
  .van-cell__value {
    color: #9c9c9e;
  }
  .field {
    width: 90%;
    background-color: #f7f4f5;
    margin: 0 auto;
    margin-top: 15px;
  }
}
</style>
